<!--  -->
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ConfigProvider, message } from 'ant-design-vue'
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { useInfoStore } from '../../stores/userInfo'

/**
 * pinia store
 */

const userInfo = useInfoStore()

/**
 * 主题色
 */
const colorState = reactive({
  primaryColor: localStorage.getItem('primaryColor') ?? '#1890ff',
})
const onColorChange = (e: any) => {
  Object.assign(colorState, { primaryColor: e.target.value })
  localStorage.setItem('primaryColor', e.target.value)
  ConfigProvider.config({
    theme: colorState,
  })
}

/**
 * 头像
 */

const fileList = ref([])
const loading = ref<boolean>(false)
const getBase64 = (img: Blob, callback: (base64Url: string) => void) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result as string))
  reader.readAsDataURL(img)
}
const beforeUpload = (file: UploadProps['fileList'][number]) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!')
  }
  return isJpgOrPng && isLt2M
}
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    loading.value = true
    return
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, (base64Url: string) => {
      userInfo.updateAvatarUrl(base64Url)
      loading.value = false
    })
  }
  if (info.file.status === 'error') {
    loading.value = false
    message.error('upload error')
  }
}
</script>

<template>
  <div class="theme">
    <a-row>
      <a-col :span="2"><span>选择主题色:</span></a-col>
      <a-col :span="22">
        <input
          type="color"
          :value="colorState.primaryColor"
          @input="onColorChange"
        />
      </a-col>
    </a-row>
  </div>
  <div class="user-info">
    <a-col :span="2">
      <span>个人头像:</span>
    </a-col>
    <a-col :span="22">
      <a-upload
        v-model:file-list="fileList"
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <a-avatar
          :size="64"
          v-if="userInfo.avatarUrl"
          :src="userInfo.avatarUrl"
          alt="avatar"
        ></a-avatar>
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
    </a-col>
  </div>
</template>

<style lang="scss" scoped>
.theme {
  width: 100%;
  padding: 8px;
}
.user-info {
  width: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
